<template>
  <n-scrollbar x-scrollable :style="`margin-bottom: -${$cfg.mobile ? '6' : '5'}px;`">
    <n-space
      justify="center"
      class="report_tab"
      :style="`height:${$cfg.mobile ? '40' : '50'}px;`"
    >
      <div
        style="
          display: flex;
          flex-flow: wrap;
          white-space: nowrap;
          gap: 8px 12px;
          padding-right: 12px;
          flex-direction: row;
          flex-wrap: nowrap;
        "
      >
        <template v-for="item in select">
          <n-select
            v-if="
              (item?.bans2 == true && $cfg?.guild?.season >= 2000) == false &&
              item?.bans3 == null
            "
            :size="$cfg.mobile ? 'small' : ''"
            v-model:value="qs[item.val]"
            :consistent-menu-width="false"
            :options="op[item.val] ?? []"
            :style="`min-width: ${$cfg.mobile ? item.mwidth : item.width}rem`"
            :placeholder="item.tips"
            @update:value="click"
          />
        </template>
        <slot name="sea"></slot>
      </div>
    </n-space>
  </n-scrollbar>
  <n-hr />
</template>

<script>
export default defineComponent({
  props: {
    select: {},
    op: {},
    qs: {},
    click: {},
    sea: {},
  },
  setup(props) {},
});
</script>
